<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <link rel="stylesheet" type="text/css" href="/plugin/layui/css/layui.css">
    <script src="/plugin/layui/layui.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<!--
    需要引入element模块
    layui-tab           整体标签
    layui-tab-title     标题  <ul><li></li><li></li></ul>   layui-this 选择默认
    layui-tab-content   内容
    layui-tab-item      具体标签    layui-show首先显示
-->
<!--
    风格
    layui-tab           默认
    layui-tab-brief     追加  简洁风格
    layui-tab-card      追加  卡片风格
    lay-allowClose      可关闭状态的选项卡
     lay-id="xxx"       id焦点定位
-->

<div class="layui-tab  layui-tab-card" lay-allowClose="true">
    <ul class="layui-tab-title">
        <li class="layui-this">网站设置</li>
        <li>用户管理</li>
        <li>权限分配</li>
        <li>商品管理</li>
        <li>订单管理</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">内容1</div>
        <div class="layui-tab-item">内容2</div>
        <div class="layui-tab-item">内容3</div>
        <div class="layui-tab-item">内容4</div>
        <div class="layui-tab-item">内容5</div>
    </div>
</div>


</body>

<script type="text/javascript">
    layui.use('element', function () {
        var element = layui.element;
    })
</script>
</html>